/**
* Created by yyr on 2018/3/14
*已投资基金》头部编辑
*/
<template>
    <div>
        <div class="ca-box ca-p-20 ca-m-t-28">
            <el-row v-show="!isAdd">
                <el-col :span="24" class="ca-align-right ca-m-b-10">
                    <el-button type="primary" @click="saveFundHead()" size="medium">保存</el-button>
                    <el-button @click="cancel()" size="medium">取消</el-button>
                </el-col>
            </el-row>
            <div>
                <el-form label-width="170px" :rules="rules" ref="ruleForm" :model="fund">
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="基金全称" labelWidth="110px" prop="fundFullname">
                                <el-input placeholder="请输入内容" v-model="fund.fundFullname" :maxlength="100"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            <el-form-item label="基金简称" labelWidth="110px" prop="fundName">
                                <el-input placeholder="请输入内容" v-model="fund.fundName" :maxlength="100"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            <el-form-item label="币种" labelWidth="110px" prop="currency">
                                <el-select placeholder="请选择" style="width:100%;" v-model="fund.currency">
                                    <el-option v-for="item in initView.currency" :label="item.name" :key="item.id"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="基金类型" labelWidth="110px">
                                <el-select placeholder="请选择" style="width:100%;" v-model="fund.fundType">
                                    <el-option v-for="item in initView.fundType" :label="item.name" :key="item.id"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            <el-form-item label="基金规模" labelWidth="110px" prop="fundScale">
                                <el-input placeholder="请输入内容" v-model="fund.fundScale">
                                    <template slot="append">万元</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            <el-form-item label="基金状态" labelWidth="110px">
                                <el-select placeholder="请选择" style="width:100%" v-model="fund.fundState">
                                    <el-option v-for="item in initView.fundState" :label="item.name" :key="item.id"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="投资期" labelWidth="110px" prop="investmentPeriod">
                                <el-input type="number" placeholder="请输入内容" v-model="fund.investmentPeriod">
                                    <template slot="append">年</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            <el-form-item label="投资延长期" labelWidth="110px" prop="investmentPeriodExtended">
                                <el-input type="number" placeholder="请输入内容" v-model="fund.investmentPeriodExtended">
                                    <template slot="append">年</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            <el-form-item label="设立时间" labelWidth="110px" prop="establishTime">
                                <el-date-picker type="date" v-model="fund.establishTime" placeholder="选择日期" style="width: 100%;">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="退出期" labelWidth="110px" prop="exitPeriod">
                                <el-input type="number" placeholder="请输入内容" v-model="fund.exitPeriod">
                                    <template slot="append">年</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            <el-form-item label="退出延长期" labelWidth="110px" prop="exitPeriodExtended">
                                <el-input type="number" placeholder="请输入内容" v-model="fund.exitPeriodExtended">
                                    <template slot="append">年</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            <el-form-item label="统一社会信用代码" labelWidth="135px" prop="creditCode">
                                <el-input placeholder="请输入内容" v-model="fund.creditCode">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="基金经理" labelWidth="110px">
                                <el-select v-model="fundUser" filterable @change="changeFundUser" placeholder="请选择"
                                    style="width:100%;">
                                    <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" class="ca-m-l-10">
                            <el-tag v-for="item in fundUserList" v-if="item.userType == 1" :key="item.id" :closable="true"
                                :close-transition="false" @close="closeUserItem(item)" :type="item.type" class="ca-m-r-10 ca-m-t-8">
                                {{item.userName}}
                            </el-tag>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="基金管理团队" labelWidth="110px">
                                <el-select v-model="userTeamItem" @change="changeUserTeam" placeholder="请选择" filterable
                                    style="width:100%">
                                    <el-option v-for="item in userOptions" :label="item.label" :key="item.value" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" class="ca-m-l-10">
                            <el-tag v-for="item in fundUserList" v-if="item.userType == 2" :key="item.id" :closable="true"
                                :close-transition="false" @close="closeUserItem(item)" :type="item.type" class="ca-m-r-10 ca-m-t-8">
                                {{item.userName}}
                            </el-tag>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="投资阶段" labelWidth="110px">
                                <el-select v-model="prostatus" @change="changeProstatus" filterable placeholder="请选择"
                                    style="width:100%;">
                                    <el-option v-for="item in initView.prostatus" :label="item.name" :key="item.id"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" class="ca-m-l-10">
                            <el-tag v-for="item in prostatusList" :key="item.prostatus" :closable="true"
                                :close-transition="false" @close="closeProstatus(item)" :type="item.type" class="ca-m-r-10 ca-m-t-8">
                                {{item.prostatus|getNameById('prostatus')}}
                            </el-tag>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="行业" labelWidth="110px">
                                <el-select v-model="industry" @change="changeIndustry" placeholder="请选择" style="width:100%">
                                    <el-option v-for="item in initView.industry" :label="item.name" :key="item.id"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" class="ca-m-l-10">
                            <el-tag v-for="item in industryList" :key="item.industry" :closable="true"
                                :close-transition="false" @close="closeIndustry(item)" :type="item.type" class="ca-m-r-10 ca-m-t-8">
                                {{item.industry|getNameById('industry')}}
                            </el-tag>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="CV行业" labelWidth="110px">
                                <el-cascader :options="initView.cvIndustry" :props="cvIndustryProps" :show-all-levels="false"
                                    v-model="cvIndustry" @change="changeCvIndustry" style="width:100%">
                                </el-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" class="ca-m-l-10">
                            <el-tag v-for="item in cvIndustryList" :key="item.cvIndustry" :closable="true"
                                :close-transition="false" @close="closeCvIndustry(item)" :type="item.type" class="ca-m-r-10 ca-m-t-8">
                                {{item.cvIndustry}}
                            </el-tag>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {
        api
    } from "../api";
    import {
        STATUS_HTTP_SUCCESS,
        apiHttp
    } from "__service/csHttp";
    export default {
        props: {
            isAdd: {
                type: Boolean,
                default () {
                    return false;
                }
            },
            fundData: {
                type: Object,
                default () {
                    return {};
                }
            },
            fundUserList: {
                type: Array,
                default () {
                    return [];
                }
            },
            prostatusList: {
                type: Array,
                default () {
                    return [];
                }
            },
            industryList: {
                type: Array,
                default () {
                    return [];
                }
            },
            cvIndustryList: {
                type: Array,
                default () {
                    return [];
                }
            },
            fundAnsatEstList: {
                type: Array,
                default () {
                    return [];
                }
            }
        },
        data() {
            return {
                itemId: this.$route.params.fundId,
                fund: this.fundData,
                initView: {
                    currency: this.$store.state.user.dictionaryMap.currency, // 币种
                    fundType: [{
                            id: "",
                            name: "请选择"
                        },
                        ...this.$store.state.user.dictionaryMap.fundType
                    ], //基金类型,
                    industry: this.$store.state.user.dictionaryMap.industry, //投资方向
                    fundState: [{
                            id: "",
                            name: "请选择"
                        },
                        ...this.$store.state.user.dictionaryMap.foundation
                    ], // 设立状态
                    userEntityList: [{
                            id: "",
                            userName: "请选择"
                        },
                        ...this.$store.state.user.department.userEntityList
                    ], //客户
                    fundCategory: this.$store.state.user.dictionaryMap.fundCategory, //基金类别
                    prostatus: [{
                            id: "",
                            name: "请选择"
                        },
                        ...this.$store.state.user.dictionaryMap.prostatus
                    ], // 投资阶段
                    cvIndustry: this.$store.state.user.dictionaryMap.cvIndustry // cv行业
                },
                fundUser: "", //基金经理
                userOptions: [], // 基金经理选项
                industry: "", //投资方向
                userTeamItem: "", //基金管理团队
                prostatus: "", // 投资阶段
                cvIndustry: null, // cv行业
                cvIndustryProps: {
                    // cv行业选项配置
                    label: "name",
                    children: "",
                    value: "id"
                },
                rules: {
                    fundFullname: [{
                        required: true,
                        message: "请输入基金全称",
                        trigger: "blur"
                    }],
                    fundName: [{
                        required: true,
                        message: "请输入基金简称",
                        trigger: "blur"
                    }],
                    currency: [{
                        required: true,
                        message: "请输入币种",
                        trigger: "blur"
                    }],
                    investmentPeriod: [{
                            required: true,
                            message: "请输入投资期",
                            trigger: "blur"
                        },
                        {
                            validator: this.checkIntegerNumber,
                            trigger: "blur",
                            type: "number"
                        }
                    ],
                    investmentPeriodExtended: [{
                        clearable: true,
                        validator: this.checkIntegerNumber,
                        trigger: "blur",
                        type: "number"
                    }],
                    exitPeriod: [{
                            required: true,
                            message: "请输入退出期",
                            trigger: "blur"
                        },
                        {
                            validator: this.checkIntegerNumber,
                            trigger: "blur",
                            type: "number"
                        }
                    ],
                    exitPeriodExtended: [{
                        clearable: true,
                        validator: this.checkIntegerNumber,
                        trigger: "blur",
                        type: "number"
                    }],
                    fundScale: [{
                        validator: this.validateMoneyNumber,
                        trigger: "blur"
                    }],
                    establishTime: [{
                        required: true,
                        message: "请输入成立时间",
                        trigger: "blur"
                    }]
                }
            };
        },
        watch: {
            "fund.establishTime": function (val) {
                if (val) {
                    this.fund.establishTime = this.$moment(this.fund.establishTime).format(
                        "YYYY-MM-DD"
                    );
                }
            }
        },
        created() {
            if (this.itemId | (this.fundUserList.length > 0)) {
                //修改
                this.fundUserList.map(item => {
                    if (item.userType === "1") {
                        this.fundUser = item.userName;
                    }
                });
            }
            if (this.fund.currency) {
                this.fund.currency = this.fund.currency.toString();
            }
            if (this.fund.fundState) {
                this.fund.fundState = this.fund.fundState.toString();
            }
        },
        mounted() {
            this.userOptions = this.initView.userEntityList.map(item => {
                return {
                    value: item.id,
                    label: item.userName
                };
            });
        },
        methods: {
            //改变基金经理
            changeFundUser(val) {
                let noRepeat = [];
                if (this.fundUserList.length > 0) {
                    this.fundUserList.map(user => {
                        if (user.userType === "1") {
                            noRepeat.push(user.userId);
                        }
                    });
                }
                if (noRepeat.indexOf(val) === -1) {
                    this.initView.userEntityList.map(user => {
                        //更改基金经理
                        if (user.id === val) {
                            this.fundUserList.push({
                                fundId: this.itemId, //基金主id
                                userId: val, //用户id
                                userName: user.userName, //用户名称
                                userType: "1" //用户类型  1：基金经理；2：基金管理团队
                            });
                        }
                    });
                }
            },
            //添加管理团队
            changeUserTeam(teamId) {
                let noRepeat = [];
                if (this.fundUserList.length > 0) {
                    //数组中已有数据，判断是否重复
                    this.fundUserList.map(user => {
                        if (user.userType === "2") {
                            noRepeat.push(user.userId);
                        }
                    });
                }
                if (noRepeat.indexOf(teamId) === -1) {
                    //没有重复，添加
                    this.initView.userEntityList.map(user => {
                        //更改基金经理
                        if (user.id === teamId) {
                            this.fundUserList.push({
                                fundId: this.itemId, //基金主id
                                userId: teamId, //用户id
                                userName: user.userName, //用户名称
                                userType: "2" //用户类型  1：基金经理；2：基金管理团队
                            });
                        }
                    });
                }
            },
            //删除管理团队
            closeUserItem(tag) {
                this.fundUserList.splice(this.fundUserList.indexOf(tag), 1);
            },
            // 添加投资阶段
            changeProstatus(val) {
                let noRepeat = [];
                this.prostatusList.forEach(item => {
                    noRepeat.push(item.prostatus);
                });
                if (noRepeat.indexOf(val) === -1) {
                    this.initView.prostatus.forEach(item => {
                        if (item.id === val) {
                            this.prostatusList.push({
                                fundId: this.itemId,
                                prostatus: val
                            });
                        }
                    });
                }
            },
            // 删除投资阶段
            closeProstatus(tag) {
                this.prostatusList.splice(this.prostatusList.indexOf(tag), 1);
            },
            //添加行业
            changeIndustry(val) {
                let noRepeat = [];
                this.industryList.forEach(item => {
                    noRepeat.push(item.industry);
                });
                if (noRepeat.indexOf(val) === -1) {
                    this.initView.industry.forEach(item => {
                        if (item.id === val) {
                            this.industryList.push({
                                fundId: this.itemId,
                                industry: val
                            });
                        }
                    });
                }
            },
            //删除行业
            closeIndustry(tag) {
                this.industryList.splice(this.industryList.indexOf(tag), 1);
            },
            // 添加CV行业
            changeCvIndustry(val) {
                val = (val.pop() || "").toString();
                let noRepeat = [];
                this.cvIndustryList.forEach(item => {
                    noRepeat.push(item.cvIndustry);
                });
                if (noRepeat.indexOf(val) === -1) {
                    this.cvIndustryList.push({
                        fundId: this.itemId,
                        cvIndustry: val
                    });
                }
            },
            // 删除CV行业
            closeCvIndustry(tag) {
                this.cvIndustryList.splice(this.cvIndustryList.indexOf(tag), 1);
            },
            //验证
            validateAdd() {
                let isSave = null;
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        isSave = true;
                    } else {
                        isSave = false;
                    }
                });
                return isSave;
            },
            // 保存
            saveFundHead() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        let parmas = {
                            fund: this.fund,
                            fundUserList: this.fundUserList,
                            prostatusList: this.prostatusList,
                            industryList: this.industryList,
                            cvIndustryList: this.cvIndustryList,
                            fundAnsatEstList: this.fundAnsatEstList
                        };
                        apiHttp(api.HEAD_CHANGE, parmas).then(ret => {
                            if (ret.resCode === STATUS_HTTP_SUCCESS) {
                                this.$message({
                                    type: "success",
                                    message: "修改成功!",
                                    center: true
                                });
                                this.cancel();
                                this.$emit("addRedDot", 0);
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            //取消
            cancel() {
                this.$emit("isEdit", false);
            }
        },
        components: {}
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>